<template>
    <div>
        <input type="text" placeholder="输入账号" v-model="text" @keyup.enter="handler1">
        <br>
        <input type="text" placeholder="输入密码" v-model="pass" @keyup.enter="handler2">
        <hr>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

                <tr v-for="item in list" :key="item.id">
                    <td>{{ item.pid }}</td>
                    <td>{{ item.ptitle }}</td>
                    <td>{{ item.price }}</td>
                    <td><button @click="handlerCount($event, -1, item.pid)">-</button>
                        {{ item.count }}
                        <button @click="handlerCount($event, 1, item.pid)">+</button>
                    </td>
                    <td><button @click="handlerDel(item.pid)">移除</button></td>
                </tr>
            </tbody>
        </table>
        <h1>商品总价:{{ priceTotal }}</h1>
    </div>
</template>

<script setup>
import { nanoid } from 'nanoid'
import { ref, watch, computed } from 'vue'
const text = ref()
const pass = ref()

const handler1 = e => {
    watch(text, (newValue, oldValue) => {
        let reg = /[^0-9]/



        if (reg.test(text.value)) {
            // text.value = newValue
            console.log('输入成功');



        } else if (!reg.test(text.value)) {
            console.log('輸入錯誤');
        }


    },
        {
            immediate: true,
            flush: 'pre'
        })



}
const handler2 = e => {
    watch(pass, (newValue, oldValue) => {

        let reg1 = /^.{6,10}$/


        if (reg1.test(pass.value)) {

            console.log('登录成功');
        } else {
            console.log('輸入錯誤');
        }

    },
        {
            immediate: true,
            flush: 'pre'
        })


}

const list = ref([{
    pid: 1,
    ptitle: 'IPhone X',
    price: 7999,
    count: 1
},
{
    pid: 2,
    ptitle: '荣耀16',
    price: 2399,
    count: 1
},

{
    pid: 3,
    ptitle: '华为P22',
    price: 3399,
    count: 1
},
{
    pid: 4,
    ptitle: '小米9',
    price: 3999,
    count: 1
},
])


const handlerCount = (e, _count, _pid) => {
    list.value.forEach(item => {
        if (item.pid == _pid) {
            if (_count < 0 && item.count > 0) {
                --item.count
            } else if (_count > 0) {
                ++item.count
            }
        }
    })
}

const handlerDel = id => {
    list.value = list.value.filter(item => item.pid !== id)
}

const priceTotal = computed(() => {
    return list.value.reduce((acc, item) => {
        return acc + item.count * item.price
    }, 0)

})
</script>

<style scoped>
table,
tr,
th,
td {
    border: 1px solid orangered;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    width: 600px;

    text-align: center;
}

tr:hover {
    background-color: skyblue;
}
</style>